import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import type { materialPanelType, schema } from "@/typings";
import { getDOMStyles } from "@/modle";


export const useLowCodeStore = defineStore('low_code', () => {
  // 物料面板
  const materialPanel = ref<materialPanelType>({
    display: false,
    icon: '',
    label: '',
    id: '',
    affix:false,
  });
  const setMaterialPanelChange = (action: { type:string, payload?: any })=>{
    switch (action.type) {
      case 'togglePanel': {
        const { plugIn } = action.payload;
        let display = false;
        if(materialPanel.value.id !== plugIn.id || !materialPanel.value.display) display = true;
        materialPanel.value = { ...materialPanel.value, ...plugIn, display };
      } break;

      case 'ifAffix': {
        materialPanel.value.affix = !materialPanel.value.affix;
      } break;

      case 'hide': {
        materialPanel.value.display = false;
      } break;
    }
  }

  // Schema
  const schemas = ref<schema[]>([
    {componentName:'canvas', id:'canvas', parentId:null},
    {componentName:'box', id:'1', parentId:'canvas', style:JSON.stringify(getDOMStyles('box')), dataSource:''},
    {componentName:'boxrow', id:'2', parentId:'1', style:JSON.stringify(getDOMStyles('boxrow')), dataSource:''},
    {componentName:'boxcol', id:'3', parentId:'2', style:JSON.stringify(getDOMStyles('boxcol')), dataSource:''},
    {componentName:'boxcol', id:'4', parentId:'2', style:JSON.stringify(getDOMStyles('boxcol')), dataSource:''},
    {componentName:'boxrow', id:'5', parentId:'3', style:JSON.stringify(getDOMStyles('boxcol')), dataSource:''},
  ]);


  return { materialPanel, setMaterialPanelChange, schemas }
})
